<template>
  <Dialog
    :title="dialogTitle"
    v-model="dialogVisible"
    :width="width"
    append-to-body
    :scroll="false"
  >
    <el-row class="!h-full">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <PaidMemberGoodsList :list="spuList" @handle-buy="onHandleBuy" @load="onHandleLoad">
          <template #tool>
            <ContentWrap class="!w-full border-none! mb-0!" :body-style="{ padding: 0 }">
              <el-row class="!w-full m-x-0!" justify="space-between" :gutter="5">
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                  <Search
                    class="mb-10px"
                    placeholder-text="请输入商品名称\商品名称首字母\商品编码\条形码"
                    @emit-keywords="onHandleSearch"
                  />
                </el-col>
              </el-row>
            </ContentWrap>
          </template>
        </PaidMemberGoodsList>
      </el-col>
    </el-row>
  </Dialog>
  <SelectSku ref="SelectSkuRef" @add-cart="onAddCart" />
</template>
<script setup lang="ts">
import { ref } from 'vue'

import Search from '@/views/shop/components/search/index.vue' //搜索组件
import PaidMemberGoodsList from './PaidMemberGoodsList.vue' //付费会员列表 和商品列表差别不大 只是class不一样 为了方便扩展 所以复制了一份

import SelectSku from '@/views/shop/sales/components/SelectSku.vue' //选择sku

import * as ProductSpuApi from '@/api/shop/product/spu'

/** 购物车信息 */
import { useShopCartStoreWithOut } from '@/store/modules/shop/cart'
import _ from 'lodash'
const shopCartStore = useShopCartStoreWithOut()

// 选中菜单
const onAddCart = async (e) => {
  console.log(e)
  if (!e.skuId) {
    message.error('请选择商品规格')
    return
  }
  await shopCartStore.addCart(e)
  close()
} //加入购物车

/**
 * 商品列表
 */
const spuQueryParams = ref({
  pageNo: 1,
  pageSize: 18,
  keyword: undefined,
  spuType: 5
}) // 查询参数 (给组件传值)
const spuList = ref<any>([])
const spuTotal = ref(0)
const loadStatus = ref('') //列表数据状态
const spuLoading = ref(true)
/** 查询列表 */
const getSpuList = async () => {
  spuLoading.value = true
  try {
    const data = await ProductSpuApi.getSpuPage(spuQueryParams.value)
    if (data.list.length == 0) {
      return
    }

    spuList.value = _.concat(spuList.value, data.list)
    spuTotal.value = data.total
    loadStatus.value = spuList.value.length < spuTotal.value ? 'more' : 'noMore'
  } finally {
    spuLoading.value = false
  }
}
/** 分页查询列表 */
const onHandleLoad = () => {
  if (loadStatus.value === 'noMore') {
    return
  }
  spuQueryParams.value.pageNo++
  getSpuList()
}
const onHandleSearch = (keyword) => {
  console.log(keyword)
  spuQueryParams.value.pageNo = 1
  spuQueryParams.value.keyword = keyword

  spuList.value = []
  getSpuList()
}
// 选择商品
const SelectSkuRef = ref()
const onHandleBuy = (item) => {
  SelectSkuRef.value.open(item.spuId)
}

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('选择付费会员') // 弹窗的标题
const width = ref('925px') //宽度
// 选择支付方式

/** 打开弹窗 */

const open = async () => {
  dialogVisible.value = true
  spuQueryParams.value.pageNo = 1
  spuList.value = []
  getSpuList()
}
const close = async () => {
  dialogVisible.value = false
}

defineExpose({ open, close }) // 提供 open 方法，用于打开弹窗

const message = useMessage() // 消息弹窗

/** 购物车信息 */
</script>
<style lang="scss" scoped></style>
